<!-- 发送操作 -->
<template>
	<view class="send-placeholder" :style="{'paddingBottom': safeAreaBottom}">
		<!-- 文字类 -->
		<view class="input-content border-top-1px">
			<view class="text-area-box">
				<textarea class="input" v-model="content" type="text" placeholder="想跟TA说点什么…"
					placeholder-style="color: #999;" auto-height confirm-type="send" @confirm="handleSend()"
					@focus="handleFocus()" :cursor-spacing="20" confirm-hold :show-confirm-bar="false" />
			</view>
			<button class="add-btn iconfont btn-transition-scale9" @click="handleToggleOthers()">&#xe61b;</button>
		</view>
		<!-- 图片类 -->
		<view class="others-content" :class="{'show': useChat.isShowOthersPanel}">
			<view class="grid border-top-1px">
				<view class="item">
					<view class="icon btn-transition-scale9" @click="handleChooseImage()">
						<text class="iconfont">&#xe629;</text>
					</view>
					<text class="label">图片</text>
				</view>
				<view class="item">
					<view class="icon btn-transition-scale9" @click="handleTakeAPhoto()">
						<text class="iconfont">&#xe617;</text>
					</view>
					<text class="label">拍照</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted, getCurrentInstance } from "vue";
	import { useChatStore } from "../store.js";

	const safeAreaBottom = getApp().globalData.safeAreaBottom + 'px'; // 底部安全区域高度
	const useChat = useChatStore();
	const content = ref('');

	// 点击发送
	const handleSend = (e) => {
		useChat.SET_SEND_CONTENT({
			type: 'text',
			content: content.value
		});
		content.value = '';
	}

	// 切换显示其它类型
	const handleToggleOthers = () => {
		useChat.SET_TOGGLE_OTHERS_PANEL();
	}
	
	// 输入框聚焦
	const handleFocus = () => {
		useChat.SET_HIDE_OTHERS_PANEL();
	}

	// 选择图片
	const handleChooseImage = () => {
		useChat.SET_HIDE_OTHERS_PANEL();
		uni.chooseImage({
			count: 1,
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album'], //从相册选择
			success: (res) => {
				useChat.SET_SEND_CONTENT({
					type: 'image',
					content: res.tempFilePaths[0]
				});
			}
		});
	}

	// 拍照
	const handleTakeAPhoto = () => {
		useChat.SET_HIDE_OTHERS_PANEL();
		uni.chooseImage({
			count: 1,
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['camera'], //从相册选择
			success: (res) => {
				useChat.SET_SEND_CONTENT({
					type: 'image',
					content: res.tempFilePaths[0]
				});
			}
		});
	}
</script>

<style lang="scss" scoped>
	.send-placeholder {
		background-color: white;
	}

	.input-content {
		display: flex;
		align-items: flex-end;
		width: 100%;
		padding: 10rpx 25rpx;
		// border-top: 1rpx solid #E5E5E5;
		box-sizing: border-box;
		
		&::after {
			background-color: #E5E5E5;
		}

		.text-area-box {
			flex-grow: 1;
			width: 0;
			display: flex;
			align-items: center;
			min-height: 80rpx;
			padding: 10rpx 32rpx;
			border-radius: 40rpx;
			background: #F2F2F4;
			box-sizing: border-box;

			.input {
				width: 100%;
				font-size: 28rpx;
				color: #222;
			}
		}

		.add-btn {
			flex-shrink: 0;
			width: 54rpx;
			height: 54rpx;
			font-size: 54rpx;
			color: #222;
			text-align: center;
			line-height: 54rpx;
			margin: 14rpx 0 14rpx 16rpx;
			margin-bottom: 14rpx;
			background-color: transparent;
		}
	}

	.others-content {
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.2s;

		&.show {
			max-height: 200px;
		}

		.grid {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			column-gap: 50rpx;
			padding: 30rpx 50rpx;
			// border-top: 1rpx solid #E5E5E5;
			box-sizing: border-box;
			
			&::after {
				background-color: #E5E5E5;
			}

			.item {

				.icon {
					position: relative;
					padding-bottom: 100%;
					background-color: #f5f5f5;
					border-radius: 10rpx;

					.iconfont {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						display: block;
						font-size: 50rpx;
						color: #222;
					}
				}

				.label {
					display: block;
					font-size: 24rpx;
					text-align: center;
					line-height: 3;
				}
			}
		}
	}
</style>